<div class="am-g">
    <div class="col-md-8">
        <h1 class="page-title">Calander</h1>
        <div class="calander" id="calander">
            <h3>{{date.year}}-{{date.month}}</h3>
            <ul class="weekdays">
                <li>Mon</li>
                <li>Tue</li>
                <li>Wen</li>
                <li>Thu</li>
                <li>Fri</li>
                <li class="weekend">Sat</li>
                <li class="weekend">Sun</li>
            </ul>
            <ul class="days">
                <li ng-repeat="day in days">
                    <div class="inner" ng-show="day.date"
                        ng-class="{
                            'today': day.date == date.date,
                            'weekend': $index % 7 == 5 || $index % 7 == 6
                        }">
                        <em>{{day.date}}</em>
                        <div class="pie"><a class="energy" href="#/detail?date={{day.dateString}}">{{day.blog.energy}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </div><!-- /.col-md-8 -->
    <div class="col-md-4 ci-col-sub">
        <div class="am-g ci-block">
            <ul class="am-g score">
                <li>
                    <div class="pie">
                        <em>12</em>
                        <small>day</small>
                    </div>
                    <span>continuous<span>
                </li>
                <li>
                    <div class="pie">
                        <em>210</em>
                        <small>day</small>
                    </div>
                    <span>total<span>
                </li>
                <li>
                    <div class="pie">
                        <em>20,521</em>
                        <small>kcal</small>
                    </div>
                    <span>energy<span>
                </li>
            </ul>
        </div>

        <div class="am-g ci-block">
            <div class="ci-block-title"><h3>30 days energy</h3></div>
            <ul class="score-2">
                <li>
                    <span class="type">Running</span>
                    <span class="time">300 <small>min</small></span>
                    <span class="energy">12,345 <small>kcal</small></span>
                </li>
                <li>
                    <span class="type">Walking</span>
                    <span class="time">500 <small>min</small></span>
                    <span class="energy">5,678 <small>kcal</small></span>
                </li>
                <li>
                    <span class="type">Biking</span>
                    <span class="time">500 <small>min</small></span>
                    <span class="energy">6,789 <small>kcal</small></span>
                </li>
                <li>
                    <span class="type">Walking</span>
                    <span class="time">500 <small>min</small></span>
                    <span class="energy">5,678 <small>kcal</small></span>
                </li>
                <li>
                    <span class="type">Biking</span>
                    <span class="time">500 <small>min</small></span>
                    <span class="energy">6,789 <small>kcal</small></span>
                </li>
            </ul>
        </div>
    </div><!-- /.col-md-4 -->
</div><!-- /.row -->

<style>
.calander {
    overflow: hidden;
}
.calander h3 {
    padding: 10px;
    margin: 0;
    border-bottom: solid 2px #666;
    text-align: center;
    font-size: 30px;
}
.calander ul, .calander li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.calander .weekdays {
    overflow: hidden;
    border-bottom: solid 1px #666;
    margin-bottom:  30px;
}
.calander .weekdays li {
    float: left;
    width: 14.28571%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.calander .weekend {
    color: #f66;
}

.calander .days li {
    position: relative;
    float: left;
    width: 14.28571%;
    height: 80px;
    margin-bottom: 30px;
    text-align: center;
}
.calander .days .pie {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    border: solid 10px #eee;
    border-radius: 50%;
    background: #ddd;
}
.calander .days em {
    position: absolute;
    top: 0;
    right: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    font-size: 12px;
    font-style: normal;
    background: #ddd;
}

.calander .days .today em {
    color: #fff;
    background: #f66;
}

.calander .days .energy {
    display: block;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-decoration: none;
    color: #666;
}


.score {
    list-style: none;
    min-width: 320px;
    padding: 0;
    margin: 0;
}

.score li {
    float: left;
    width: 33.33333%;
    text-align: center;
}

.score .pie {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px auto;
    border: solid 10px #eee;
    border-radius: 50%;
    background-color: #ddd;
}
.score .pie em {
    display: block;
    height: 35px;
    line-height: 55px;
    font-size: 16px;
    font-style: normal;
}
.score .pie small {
    display: block;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}


.score-2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.score-2 li {
    padding: 5px 10px;
    border-bottom: solid 1px #ddd;
}

.score-2 span {
    display: inline-block;
    min-width: 100px;
}
</style>
